<template>
  <div>
    <avue-crud ref="crud" :page="page" :data="dataList" :table-loading="dataListLoading" :option="tableOption"
      @on-load="getDataList">

      <template slot-scope="scope" slot="menuLeft">
        <el-button type="primary" size="small" @click.stop="exportTable()">导出表单</el-button>
      </template>

      <template v-if="false" slot="orders" slot-scope="scope">
        <el-button size="small" @click="openOrderList(scope.row.userId)">
          查看详情
        </el-button>
      </template>

      <template slot-scope="scope" slot="menu">
        <el-button v-if="scope.row.state == 2" size="small" type="primary" icon="el-icon-edit"
          @click.stop="vertify(scope.row.cashId,'pass')">通过</el-button>
        <el-button v-if="scope.row.state == 2" size="small" type="danger" icon="el-icon-edit"
          @click.stop="vertify(scope.row.cashId,'not')">拒绝</el-button>
        <el-button v-else-if="scope.row.state == 1" type="info" size="small"
          style="color:#F56C6C;background-color:white;border:0px solid #EBEEF5">审核未通过</el-button>
        <el-button v-else-if="scope.row.state == 3"  size="small" @click.stop='showTheEvidence(scope.row)'>查看凭证</el-button>
        <el-button v-else class="edit" type="primary" size="small" @click.stop="vertify(scope.row.cashId,'upload')">上传凭证
        </el-button>
      </template>
    </avue-crud>

    <el-dialog title="上传凭证" :visible.sync="dialogVisible" width="30%" center :before-close="handleClose">
      <FileUpload @input='handleFileUpload' :value='filePic' class='fileUpload'></FileUpload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="查看凭证" :visible.sync="ifShowEvidence" width="30%" center :before-close="handleClose">
        <el-image
          :src="evidencePic"
          :preview-src-list="[evidencePic]">
        </el-image>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="handleClose">取 消</el-button> -->
        <el-button type="primary" @click="handleClose()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {
    tableOption
  } from '@/crud/finance/merchantCashout'
  import FileUpload from '@/components/pic-upload/index.vue'
  export default {
    data() {
      return {
        dataListLoading: false,
        dialogVisible: false, //上传凭证
        ifShowEvidence: false, //查看凭证
        dataList: [],
        tableOption: tableOption,
        page: {
          total: '',
          currentPage: '',
          pageSize: 10,
          pageSizes: [10, 20, 30, 50, 100],
        },
        filePic: '',
        cashId: null,
        evidencePic: ''
      }
    },

    components: {
      FileUpload,
    },

    methods: {
      getDataList(page, params) {
        this.dataListLoading = false
        this.$http({
          url: this.$http.adornUrl("/cashOut/pageByShop"),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign({
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.size : page.pageSize,
            })
          )
        }).then(({
          data
        }) => {
          this.dataList = data.records
          this.page.total = data.total
          this.page.currentPage = data.current
          console.log(data);
        })
      },

      vertify(cashId, ifpass) {
        let messageBox = {}
        messageBox.title = '提现审核'
        if (ifpass == 'upload') {
          this.dialogVisible = true
          this.cashId = cashId
          return
        } else if (ifpass == 'pass') {
          messageBox.context = '确定通过此条提现审核？'
          messageBox.status = '0'
        } else {
          messageBox.context = '您即将拒绝此条提现审核，确认操作？'
          messageBox.status = '1'
        }
        this.$confirm(messageBox.context, messageBox.title, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/cashOut/checkingCashOut'),
            method: 'post',
            params: this.$http.adornParams({
              cashId,
              status: messageBox.status
            })
          }).then(res => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.getDataList()
          })
        })
      },

      handleFileUpload(file) {
        console.log(file)
        this.filePic = file
      },

      confirm() {
        this.$http({
          url: this.$http.adornUrl('/cashOut/transferred'),
          method: 'post',
          params: this.$http.adornParams({
            cashId: this.cashId,
            status: '3',
            certificate: window.SITE_CONFIG.resourcesUrl + this.filePic
          })
        }).then(({
          data
        }) => {
          if (data == 'success') {
            this.handleClose()
            this.cashId = null
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.getDataList()
          }
        })
      },
      handleClose() {
        this.filePic = ''
        this.dialogVisible = false
        this.ifShowEvidence = false
      },

      exportTable() {
        console.log('exportTable running')
        this.$http({
          url: this.$http.adornUrl('/order/order/getAccountExcel'),
          method: 'post',
          responseType: 'blob' // 解决文件下载乱码问题
        }).then(({
          data
        }) => {
          var blob = new Blob([data], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
          })
          const fileName = '商家提现申请列表.xls'
          const elink = document.createElement('a')
          if ('download' in elink) { // 非IE下载
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
          } else { // IE10+下载
            navigator.msSaveBlob(blob, fileName)
          }
        })
      },

      showTheEvidence(item) {
        console.log(item)
        this.ifShowEvidence = true
        this.$http({
          url: this.$http.adornUrl('/cashOut/getPic'),
          method: 'get',
          params: this.$http.adornParams({
            cashOutId: item.cashId
          })
        }).then(res =>{
          console.log(res)
          this.evidencePic = res.data
        })
      }
    },
  }
</script>
<style lang="scss">
  .fileUpload {
    margin: 0 auto;
    width: 185px;
  }
</style>
